<template>
  <el-dialog
    custom-class="no-header-dialog"
    title="血液详情"
    top="3vh"
    :visible.sync="dialogVisible"
    width="1250px"
  >
    <el-container>
      <el-aside width="900px">
        <el-divider content-position="left">
          <b class="primary">捐血者信息</b>
        </el-divider>
        <el-descriptions
          border
          :column="4"
          content-class-name="contentClass"
          label-class-name="labelClass"
        >
          <el-descriptions-item
            v-for="(item, index) in bloodDetail.jxz"
            :key="index"
            :label="item.name"
            :span="item.column"
          >
            <span
              :class="item.bold ? 'font-bold' : ''"
              :style="{
                color: item.color || fontColor,
                fontSize: item.fontsize || fontSize,
              }"
            >
              {{ getAttr(item) }}
            </span>
          </el-descriptions-item>
        </el-descriptions>
        <div class="h20"></div>
        <el-divider content-position="left">
          <b class="primary">血液信息</b>
        </el-divider>
        <el-descriptions
          border
          :column="4"
          content-class-name="contentClass"
          label-class-name="labelClass"
        >
          <el-descriptions-item
            v-for="(item, index) in bloodDetail.xy"
            :key="index"
            :label="item.name"
          >
            <span
              :class="item.bold ? 'font-bold' : ''"
              :style="{
                color: item.color || fontColor,
                fontSize: item.fontsize || fontSize,
              }"
            >
              {{ getAttr(item) }}
            </span>
          </el-descriptions-item>
        </el-descriptions>
        <div class="h20"></div>
        <el-divider content-position="left">
          <b class="primary">配血信息</b>
        </el-divider>
        <el-descriptions
          border
          :column="4"
          content-class-name="contentClass"
          label-class-name="labelClass"
        >
          <el-descriptions-item
            v-for="(item, index) in bloodDetail.px"
            :key="index"
            :label="item.name"
          >
            <span
              :class="item.bold ? 'font-bold' : ''"
              :style="{
                color: item.color || fontColor,
                fontSize: item.fontsize || fontSize,
              }"
            >
              {{ getAttr(item) }}
            </span>
          </el-descriptions-item>
        </el-descriptions>
      </el-aside>
      <el-main style="padding-top: 0; padding-right: 0">
        <el-divider content-position="left">
          <b class="primary">受血者信息</b>
        </el-divider>
        <el-descriptions
          border
          :column="1"
          content-class-name="contentClass"
          label-class-name="labelClass"
        >
          <el-descriptions-item
            v-for="(item, index) in bloodDetail.sxz"
            :key="index"
            :label="item.name"
          >
            <span
              :class="item.bold ? 'font-bold' : ''"
              :style="{
                color: item.color || fontColor,
                fontSize: item.fontsize || fontSize,
              }"
            >
              {{ getAttr(item) }}
            </span>
          </el-descriptions-item>
        </el-descriptions>
      </el-main>
    </el-container>
    <div v-if="formData.BLOOD_SOURCE === '自采'">
      <div class="h20"></div>
      <el-divider content-position="left">
        <b class="primary">检验信息</b>
      </el-divider>
      <el-table border :data="documents" stripe @row-dblclick="showDetail">
        <el-table-column
          align="center"
          label="检验单号"
          prop="none"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="血型"
          prop="none"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="Rh(D)"
          prop="none"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="验血者"
          prop="none"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="检验"
          prop="none"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="试管号"
          prop="none"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="检验日期"
          prop="none"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="检验结果"
          prop="none"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="审核医师"
          prop="none"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="备注"
          prop="none"
          show-overflow-tooltip
        />
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
  import { bloodDetail } from '@/utils/constant'
  export default {
    data() {
      return {
        dialogVisible: false,
        bloodDetail,
        formData: {},
        fontColor: '#2440b3',
        fontSize: '12px',
        documents: [],
      }
    },
    methods: {
      showDetail(row) {
        console.log(row)
      },
      show(row) {
        this.formData = row
        this.dialogVisible = true
      },
      getAttr(item) {
        let value = this.formData[item.namekey]
        if (value) {
          if (typeof value === 'object') {
            value = item.default
          }
          return value
        }
        return item.default
      },
    },
  }
</script>

<style lang="scss" scoped>
  .primary {
    color: #409eff;
  }
  .el-divider--horizontal {
    margin: 8px 0 21px 0 !important;
  }
  .el-main {
    padding-bottom: 0;
  }
</style>
